<template>
	<view class="page">
		<view class="safe" style="width: 100%;" :style="{height:safe+'rpx'}"></view>
		<view class="topTitle">
			<text>分类</text>
		</view>
		<view class="distirct" :animation='animationData'>
			
			<view class="types" :class="index===activeIndex?'active':''" v-for="(item,index) in typeList" :key='index' @click="choosedivd(index,item)">
				<text>{{item.name}}</text>
			</view>
			<view class="open">
				<!-- <text>更多分类</text> -->
				<u-icon v-if="flag" name="arrow-up" color="#2979ff" size="28" @click="closeMore"></u-icon>
				<u-icon v-else name="arrow-down" color="#2979ff" size="28" @click="openMore"></u-icon>
			</view>
			
		</view>

		<goodsList :list='dataList'></goodsList>

	</view>
</template>

<script>
	import goodsList from "../../component/goodsList.vue"
	export default {
		components:{
			goodsList
		},
		data() {
			return {
				safe:this.globalData.safeH*2,
				flag:false,
				goodsClazz:'',
				activeIndex:-1,
				animationData: {},
				typeList: [{
					hot: true,
					name: '宠物',
					
					type: 'pink'
				}, {
					hot: true,
					name: '居家',
					type: 'pink'
				}, {
					hot: false,
					name: '水果',
					type: 'pink'
				}, {
					hot: false,
					name: '绿植',
					type: 'green'
				}, {
					hot: true,
					name: '零食',
					type: 'blue'
				}],
				dataList: [],
				// desc: '收集众多的常用页面和布局，减少开发者的重复工作，让你专注逻辑，事半功倍'
			}
		},
		computed: {
			
			
		},
		onLoad() {
			this.getData()	
		},
		onShow() {
			let animation=uni.createAnimation({
				duration: 1000,
				timingFunction: 'ease',
			})
			this.animation=animation
		},
		methods: {
			getData(){
				let parmas={
					
				}
				this.$http.post('goods_msg/list',parmas).then(res=>{
					this.dataList=res.list
				})
			},
			getdivdData(){
				let parmas={
					goodsClazz:this.goodsClazz
				}
				this.$http.post('goods_msg/list',parmas).then(res=>{
					this.dataList=res.list
				})
			},
			choosedivd(i,it){
				this.activeIndex=i
				this.dataList=[]
				this.goodsClazz=it.name
				this.getdivdData()
			},
			openMore(){
				
				this.animation.height(140).step()
				this.animationData = this.animation.export()
				this.flag=true
			},
			closeMore(){
				
				this.animation.height(65).step()
				this.animationData = this.animation.export()
				this.flag=false
			}
		}
	}
</script>



<style lang="scss" scoped>
	.page {
		width: 100%;
		height: 100%;
		background-color: #fff;
		padding:0 20rpx;
		
		.topTitle {
			width: 100%;
			height: 80rpx;
			background-color: #fff;
			font-size: 36rpx;
			line-height: 80rpx;
			font-weight: bold;
			margin-bottom: 10rpx;
		}
		
		.distirct {
			width: 100%;
			height: 130rpx;
			
			margin-bottom: 20rpx;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			flex-wrap: wrap;
			align-content: flex-start;
			position: relative;
			overflow: hidden;
			.types {
				width: 150rpx;
				height: 46rpx;
				text-align: center;
				background-color: rgba($color: #ccc, $alpha: 0.6);
				border-radius: 10rpx;
				line-height: 46rpx;
				margin-bottom: 20rpx;
			}
			.active{
					background-color: #FAB6B6;
			}
			.open{
				position: absolute;
				bottom: -10rpx;
				z-index: 99;
				left: 50%;
				transform: translateX(-50%);
			}
		}
		.readList{
			width: 100%;
			height: 240rpx;
			margin-bottom: 20rpx;
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			.left{
				width: 180rpx;
				height: 240rpx;
				background-color: #18B566;
				margin-right: 20rpx;
			}
			.right{
				width: 500rpx;
				height: 240rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				align-items: flex-start;
				
				.footTxt{
					width: 100%;
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					align-items: center;
					.font12{
						font-size: 20rpx;
						color: #ccc;
					}
					.butt{
						width: 60rpx;
						height: 30rpx;
						border: 2rpx solid #ccc;
						text-align: center;
						line-height: 30rpx;
						font-size: 22rpx;
						color: #ccc;
					}
				}
			}
		}
	}
</style>
